<template>
	<div class="kaoguanguanli" style="padding-bottom: 0.8rem;" >

    <div id="myElement" ref="myElement" style="position: relative; left: -1000px;" >
      <img src="../../../static/img/fenxiang.png" style="width: 7.5rem;">
      <div style="position: absolute;  bottom: 1.3rem; left: 2.9rem; font-size: 16px; width: 1.8rem; height: 1.8rem;; padding: 0.1rem; background: #fff; border-radius: 0.1rem;">
        <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto; max-width: 100%; max-width: 100%;"></div>
      </div>
    </div>

    <div @click="shengcheng" style="color: #197cff; font-size: 16px;  text-align: center; font-weight: bold; position: fixed; right: 0.5rem; bottom: 1rem; background: #fff; border-radius: 0.1rem; padding: 0.2rem;">生成我的推广图</div>

	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas';
	export default {
		name: 'kaoguanguanli',
		data() {
			return {
        search:{
          competition_id:parseInt(this.$route.query.competition_id),
          inv_user_id:parseInt(this.$route.query.enrolment_id),
        },
        imgurl:"",
        chengjiall:{
            "id_name": "",
            "ranking": "",
        }
			}
		},
    beforeDestroy() {

    },
		created() {
      // this.getlist()
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;


      this.$refs.qrCodeUrl.innerHTML = '';

      let url = location.origin + '/h5/bisai/detail?id='+this.search.competition_id+'&inv_user_id='+this.search.enrolment_id
      const textToCopy = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd9e4d5f151960619&redirect_uri=" + encodeURIComponent(url) + "&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect";

      axios.post(this.IP_URL+'/api/competition/shortchain',{url:textToCopy}).then((response)=>{
      	if (response.data.msg.code == 0) {

          var qrcode = new QRCode(this.$refs.qrCodeUrl, {
              text: response.data.data.shorturl,
              width: document.documentElement.clientWidth / 7.5 * 1.6,
              height: document.documentElement.clientWidth / 7.5 * 1.6,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.H
          })

      	} else {
      		this.$message.error(response.data.msg.info);
      	}
      })


		},
		methods: {

      dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new Blob([u8arr], { type: mime })
      },

      shengcheng:function(){
        const element = this.$refs.myElement;
        html2canvas(element,{
          scale: 3, // 增加缩放比例
        }).then(canvas => {
          const dataUrl = canvas.toDataURL();
          console.log(dataUrl)
          let file = this.dataURLtoFile(dataUrl,'证书'+ parseInt(Math.random()*100000) + '.png')


          // let file2 = this.dataURLtoBlob(dataUrl)
          // var myUrl = URL.createObjectURL(file2)
          // var a = document.createElement("a")
          // a.setAttribute("href", myUrl)
          // a.setAttribute("download", 'zhengshu.png')
          // a.setAttribute("target", "_blank")
          // let clickEvent = document.createEvent("MouseEvents")
          // clickEvent.initEvent("click", true, true)
          // a.dispatchEvent(clickEvent)


          this.uploadok(file)
        });
      },

      uploadok:function(file){

        let data = new FormData()
        data.append('file',file)
        axios.post(this.IP_URL+'/index/upload',data).then((response)=>{
          if(response.data.msg.code == 0){
            this.imgurl = response.data.data.url
            location.href = this.imgurl
          } else {
            this.$message.error(response.data.reason);
          }
        })

      },

      dataURLtoFile:function(dataurl, filename) {
      	let arr = dataurl.split(',');
      	let mime = arr[0].match(/:(.*?);/)[1];
      	let bstr = atob(arr[1]);
      	let n = bstr.length;
      	let u8arr = new Uint8Array(n);
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n);
      	}
      	return new File([u8arr], filename, {
      		type: mime
      	});
      },


      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
          competition_id:this.$route.query.competition_id,
          enrolment_id:this.$route.query.enrolment_id
        }}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.chengjiall = response.data.data[0]
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }


    }
	}
</script>


<style scoped >
  .qrcode img{ max-width: 100%; max-height: 100%;}
  /deep/ .el-input__inner{}
  /deep/ .el-dialog__header{ padding: 0;}
  /deep/ .van-cell{ padding: 10px 0;}
</style>
